<template>
	<div class="page">
		<c-title :hide="false" text="预约详情"></c-title>
		<div class="yybox">
			<div class="top">
				<div class="l">预约状态</div>
				<div class="r" :class="data.status ==0?'cr':'cg'">{{data.status==0?'取消预约':'已预约'}}</div>
			</div>
			<div class="content">
				<div class="item">
					<div class="l">就诊时间</div>
					<div class="r time">{{data.visit_time}}</div>
				</div>
				<div class="item">
					<div class="l">预约医生</div>
					<div class="r">{{data.name}}</div>
				</div>
				<div class="item">
					<div class="l">预约人手机号</div>
					<div class="r">{{data.phone}}</div>
				</div>
				<div class="item">
					<div class="l">预约人身份证号</div>
					<div class="r">{{data.id_card}}</div>
				</div>
				<div class="item">
					<div class="l">医院地址</div>
					<div class="r ">{{data.address}}</div>
				</div>
				<div class="item">
					<div class="l">病情描述</div>
					<div class="r">{{data.description}}</div>
				</div>
			</div>
		</div>
		<div class="submit" @click="submit">取消预约</div>
	</div>
</template>

<script>
	import {
		Toast
	} from 'vant';
	export default{
		data(){
			return{
				data:{},
				ids:''
			}
		},
		activated() {
			this.ids = this.$route.query.ids
			this.getdata()
		},
		methods:{
			getdata(){
				$http
					.post("plugin.hft-hospital.api.index.my_order_info", {
						id: this.ids
				
					})
					.then(response => {
						console.log(response)
						if (response.result === 1) {
							this.data = response.data
						} else {
							Toast(response.msg);
						}
					})
					.catch(error => {
						console.log(error);
					});
			},
			submit(){
				$http
				.post("plugin.hft-hospital.api.index.cancel_order", {
					id: this.ids
			
				})
				.then(response => {
					console.log(response)
					if (response.result === 1) {
						Toast(response.msg)
						this.getdata()
						// this.data = response.data
					} else {
						Toast(response.msg);
					}
				})
				.catch(error => {
					console.log(error);
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.page{
		.submit{
			width: 100%;
			background-color: #f00;
			color: #fff;
			line-height: 2.5rem;
			margin-top: 3rem;
		}
		.yybox{
			padding: 0.5rem;
			background-color: #fff;
			font-size: 1rem;
			.content{
				.item{
					display: flex;
					line-height:2rem;
					.l{
						width: 9rem;
						color: #AEAEAE;
						text-align: left;
					}
					.r{
						
					}
					.time{
						color: #D2BFC1;
					}
				}
			}
			.top{
				display: flex;
				justify-content: space-between;
				// background-color: #aaa;
				line-height: 2rem;
				.l{
					color: #AEAEAE;
				}
				.cg{
					color: #0f0;
				}
				.cr{
					color: #f00;
				}
			}
		}
	}	
</style>